{extend name='../app/admin/view/common/block.html' /}

{block name="content"}
<div class="layui-btn-container " style="display: inline-block;">
    <button id="btnDeleteChecked" class="layui-btn layui-btn-sm layui-btn-danger" j-href="{:plugin_url('delete')}">
        <i class="layui-icon">&#xe640;</i>删除
    </button>
    <button class="layui-btn layui-btn-sm j-open"
            j-href="{:plugin_url('create')}"
            j-title="新增商品分类"
            j-type="2"
            j-config='{"area":["80%","80%"],"anim":2}'
    >新增
    </button>
    <button id="btnExpandAll" class="layui-btn layui-btn-sm layui-btn-primary">
        <i class="layui-icon layui-icon-spread-left"></i>展开
    </button>
</div>

<script type="text/html" id="opera">
    <button class="layui-btn layui-btn-xs" lay-event="edit">编辑</button>
    <button class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</button>
</script>

<table id="table" lay-filter="cates"></table>
{/block}


{block name="script"}
<script>
    layui.config({
        base: '/static/extra/layui/plugins/treetable-lay/dist/'
    }).use(['layer', 'util', 'treeTable'], function () {
        var $ = layui.jquery
            , layer = layui.layer
            , util = layui.util
            , treeTable = layui.treeTable;

        // 渲染表格
        var insTb = treeTable.render({
            elem: '#table',
            url: '{:plugin_url()}',
            method: 'post',
            height: 'full-150',
            size: 'sm',
            tree: {
                iconIndex: 2,
                isPidData: true,
                idName: 'id',
                pidName: 'pid'
            },
            defaultToolbar: ['filter', 'print', 'exports', {
                title: '提示',
                layEvent: 'LAYTABLE_TIPS',
                icon: 'layui-icon-tips'
            }],
            cols: [
                [
                    {type: 'checkbox'}
                    , {field: 'id', title: 'id', sort: true, width: 50}
                    , {field: 'title', title: '名称', }
                    , {field: 'pic_url', title: '图标', align: 'center', width: 70,templet:function(d){
                        return '<div><img src="'+d.pic_url+'" width="100%" onclick="showImg(this)"/></div>';
                    }}
                    , {field: 'sort', title: '排序', align: 'center', width: 50,sort:true}
                    , {field: 'status_text', title: '状态',width:70,templet:function(d){
                        if(d.status == 1){
                            return '<span class="layui-badge layui-bg-green">'+d.status_text+'</span>';
                        }else{
                            return '<span class="layui-badge">'+d.status_text+'</span>';
                        }
                    }}
                    , {field: 'createtime', title: '创建时间', width: 200}
                    , {field: 'updatetime', title: '修改时间', width: 200}
                    , {title: '操作', toolbar: '#opera', width: 115}
                ]
            ],
            style: 'margin-top:0;'
        });

        // 工具列点击事件
        treeTable.on('tool(table)', function (obj) {
            var event = obj.event,
                data = obj.data;
            if (event === 'del') {
                layer.confirm('此操作将删除菜单及其他的所有子分类，请确认',{
                    btn:['确认','取消'],
                },function(index, layero){
                    layer.close(index);
                    $.get('delete', {id:data.id},function(r){
                        if(r.code == 1){
                            showpopup(r.msg);
                            obj.del();
                        }else{
                            showpopup(r.msg);
                        }
                    },'json')
                },function(index){
                    layer.close(index);
                })


            } else if (event === 'edit') {
                layer.open({
                    type:2,
                    content:'update?id='+data.id,
                    shadeClose:true,
                    area:['80%','80%'],
                })
            }
        });

        $(document).on('click','#btnExpandAll',function () {
            $.each(insTb.checkStatus(),function(index,item){
                if(item.children) {
                    insTb.expand(item.id);
                }
                return true;
            })
            $(this).attr('id','btnFoldAll').html('<i class="layui-icon layui-icon-spread-left">折叠');
        });

        $(document).on('click','#btnFoldAll',function () {
            $.each(insTb.checkStatus(),function(index,item){
                if(item.children){
                    insTb.fold(item.id);
                }
                return true;
            });
            $(this).attr('id','btnExpandAll').html('<i class="layui-icon layui-icon-shrink-right">展开');
        });
    });

</script>
{/block}

